<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ room_name }} - AI Chat</title>
    <style>
        /* 基础样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }

        :root {
            --primary: #4361ee;
            --primary-dark: #3a56d4;
            --secondary: #3f37c9;
            --accent: #4895ef;
            --dark: #1d1e2c;
            --darker: #121420;
            --light: #f8f9fa;
            --gray: #6c757d;
            --light-gray: #a0aec0;
            --success: #4cc9f0;
            --warning: #f72585;
            --card-bg: rgba(255, 255, 255, 0.05);
            --border-radius: 12px;
            --transition: all 0.3s ease;
        }

        body {
            background: linear-gradient(135deg, var(--darker), var(--dark));
            color: var(--light);
            min-height: 100vh;
            padding: 1rem;
            line-height: 1.6;
        }

        a {
            color: var(--accent);
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        /* 聊天室容器 */
        .chat-room-container {
            max-width: 1200px;
            margin: 0 auto;
        }

        /* 房间标题区域 */
        .room-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .room-title {
            font-size: 1.8rem;
            color: var(--accent);
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .room-title::before {
            content: "#";
            font-size: 1.5rem;
            color: var(--primary);
        }

        .room-actions {
            display: flex;
            gap: 1rem;
        }

        /* 按钮样式 */
        .btn {
            display: inline-block;
            padding: 0.75rem 1.5rem;
            background: var(--primary);
            color: white;
            text-decoration: none;
            border-radius: 30px;
            font-weight: 600;
            transition: var(--transition);
            border: none;
            cursor: pointer;
            text-align: center;
            font-size: 0.9rem;
        }

        .btn:hover {
            background: var(--secondary);
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(67, 97, 238, 0.3);
        }

        .btn-outline {
            background: transparent;
            border: 2px solid var(--primary);
            color: var(--primary);
        }

        .btn-outline:hover {
            background: var(--primary);
            color: white;
        }

        .btn-warning {
            background: var(--warning);
        }

        .btn-warning:hover {
            background: #e01e6b;
        }

        /* 聊天主区域 */
        .chat-container {
            display: grid;
            grid-template-columns: 1fr 250px;
            gap: 1.5rem;
            height: calc(100vh - 180px);
        }

        /* 消息区域 */
        .chat-messages {
            background: var(--card-bg);
            border-radius: var(--border-radius);
            padding: 1.5rem;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .message {
            padding: 1rem;
            border-radius: var(--border-radius);
            max-width: 80%;
            position: relative;
            animation: fadeIn 0.3s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .user-message {
            background: rgba(67, 97, 238, 0.15);
            align-self: flex-end;
            border-bottom-right-radius: 4px;
        }

        .other-message {
            background: rgba(255, 255, 255, 0.05);
            align-self: flex-start;
            border-bottom-left-radius: 4px;
        }

        .system-message {
            background: rgba(247, 37, 133, 0.1);
            align-self: center;
            text-align: center;
            max-width: 100%;
        }

        .message-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.5rem;
        }

        .message-sender {
            font-weight: 600;
            color: var(--accent);
        }

        .message-time {
            color: var(--gray);
            font-size: 0.8rem;
        }

        .message-content {
            line-height: 1.5;
        }

        .deepseek-indicator {
            display: inline-block;
            background: rgba(72, 149, 239, 0.2);
            color: var(--accent);
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
            border-radius: 12px;
            margin-top: 0.5rem;
        }

        /* 成员列表 */
        .members-panel {
            background: var(--card-bg);
            border-radius: var(--border-radius);
            padding: 1.5rem;
            overflow-y: auto;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .members-header {
            font-size: 1.25rem;
            margin-bottom: 1rem;
            color: var(--accent);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .members-header::before {
            content: "👤";
        }

        .members-list {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .member {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem;
            border-radius: 8px;
            transition: var(--transition);
        }

        .member:hover {
            background: rgba(255, 255, 255, 0.05);
        }

        .member-avatar {
            width: 36px;
            height: 36px;
            background: var(--primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: white;
        }

        .member-name {
            font-weight: 500;
            flex-grow: 1;
        }

        /* 输入区域 */
        .input-container {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 1rem;
            margin-top: 1.5rem;
            position: sticky;
            bottom: 0;
            background: var(--darker);
            padding: 1rem 0;
        }

        .input-group {
            display: flex;
            background: var(--card-bg);
            border-radius: 30px;
            padding: 0.5rem;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        #msg {
            flex-grow: 1;
            background: transparent;
            border: none;
            color: var(--light);
            padding: 0.75rem 1rem;
            font-size: 1rem;
            outline: none;
        }

        .input-group:focus-within {
            border-color: var(--primary);
        }

        #send {
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 30px;
            padding: 0.75rem 1.5rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
        }

        #send:hover {
            background: var(--secondary);
            transform: translateY(-2px);
        }

        .deepseek-container {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: 0.5rem;
        }

        .deepseek-label {
            color: var(--light-gray);
            font-size: 0.9rem;
        }
        /* 请求DeepSeek回复的标记 */
        .deepseek-request {
            color: var(--accent);
            font-size: 0.8rem;
            margin-left: 0.5rem;
            background: rgba(72, 149, 239, 0.2);
            padding: 0.2rem 0.5rem;
            border-radius: 12px;
        }

        /* 请求DeepSeek的消息特殊样式 */
        .message.deepseek-requested {
            border-left: 3px solid var(--accent);
            background: rgba(72, 149, 239, 0.1);
        }

        /* 如果是当前用户请求DeepSeek的消息 */
        .message.user-message.deepseek-requested {
            background: rgba(72, 149, 239, 0.15);
        }

        /* 响应式设计 */
        @media (max-width: 900px) {
            .chat-container {
                grid-template-columns: 1fr;
                height: auto;
            }

            .members-panel {
                height: 300px;
            }
        }

        @media (max-width: 600px) {
            .room-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }

            .room-actions {
                width: 100%;
                justify-content: space-between;
            }

            .message {
                max-width: 90%;
            }

            .input-container {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="chat-room-container">
        <div class="room-header">
            <h1 class="room-title">{{ room_name }}</h1>
            <div class="room-actions">
                <a href="{% url 'Chat:room_list' %}" class="btn btn-outline">返回列表</a>
                <a href="{% url 'Chat:leave_room' room_id=room_id %}" class="btn btn-warning">退出房间</a>
            </div>
        </div>

        <div class="chat-container">
            <div id="chat-messages" class="chat-messages">
                {% for msg in messages %}
                    {% if msg.0 == request.user.username %}
                        <div class="message user-message">
                            <div class="message-header">
                                <div class="message-sender">你</div>
                                <div class="message-time">{{ msg.2 }}</div>
                            </div>
                            <div class="message-content">{{ msg.1 }}</div>
                            {% if msg.3 %}
                                <div class="deepseek-indicator">DeepSeek 生成</div>
                            {% endif %}
                        </div>
                    {% else %}
                        <div class="message other-message">
                            <div class="message-header">
                                <div class="message-sender">{{ msg.0 }}</div>
                                <div class="message-time">{{ msg.2 }}</div>
                            </div>
                            <div class="message-content">{{ msg.1 }}</div>
                            {% if msg.3 %}
                                <div class="deepseek-indicator">DeepSeek 生成</div>
                            {% endif %}
                        </div>
                    {% endif %}
                {% endfor %}
            </div>

            <div class="members-panel">
                <h3 class="members-header">房间成员 ({{ room_members|length }})</h3>
                <div class="members-list">
                    {% for member in room_members %}
                        <a href="{% url 'PrivateChat:get_private_room' peer_id=member.0 room_id=room_id %}" class="member">
                            <div class="member-avatar">{{ member.1|slice:":1"|upper }}</div>
                            <div class="member-name">{{ member.1 }}</div>
                        </a>
                    {% endfor %}
                </div>
            </div>
        </div>

        <div class="input-container">
            <div class="input-group">
                <input id="msg" type="text"  placeholder="输入消息..." autocomplete="off">
                <button type="button" id="send">发送</button>
            </div>
            <div class="deepseek-container">
                <input type="checkbox" id="deepseek-check">
                <label for="deepseek-check" class="deepseek-label">使用 DeepSeek 智能回复</label>
            </div>
        </div>
    </div>

   <script>
    document.addEventListener('DOMContentLoaded', () => {
        const msg = document.getElementById('msg');
        const deepseek = document.getElementById('deepseek-check');
        const messageList = document.getElementById('chat-messages');
        const sendBtn = document.getElementById('send');
        const room_id = "{{ room_id }}";

        // 自动滚动到底部
        messageList.scrollTop = messageList.scrollHeight;

        const chatSocket = new WebSocket(`ws://${window.location.host}/ws/chat/${room_id}/`);

        chatSocket.onopen = () => console.log("WebSocket 已连接");

        chatSocket.onmessage = (e) => {
            const data = JSON.parse(e.data);
            const messageDiv = document.createElement('div');

            if (data.type === "system_message") {
                messageDiv.className = 'message system-message';
                messageDiv.innerHTML = `
                    <div class="message-content">${data.message}</div>
                    <div class="message-time">${new Date(data.timestamp).toLocaleTimeString()}</div>
                `;
            } else if (data.type === "chat_message") {
                const isCurrentUser = data.sender === "{{ request.user.username }}";
                messageDiv.className = isCurrentUser ? 'message user-message' : 'message other-message';
                const isRequestingDeepseek = !data.is_deepseek && data.require_deepseek;
                messageDiv.innerHTML = `
                    <div class="message-header">
                        <div class="message-sender">${isCurrentUser ? '你' : data.sender}</div>
                        <div class="message-time">${new Date(data.timestamp).toLocaleTimeString()}</div>
                    </div>
                    <div class="message-content">${data.message}</div>
                    ${data.is_deepseek ? '<div class="deepseek-indicator">DeepSeek 生成</div>' : ''}
                `;
                if (isRequestingDeepseek) {
                    messageDiv.classList.add('deepseek-requested');
                }
            }

            messageList.appendChild(messageDiv);
            messageList.scrollTop = messageList.scrollHeight;
        };

        chatSocket.onclose = (e) => console.log("WebSocket 断开连接", e);

        // 发送消息
        const sendMessage = () => {
            let msgs = msg.value.trim();
            if (msgs) {
                chatSocket.send(
                    JSON.stringify({
                        message: msgs,
                        require_deepseek: deepseek.checked
                    })
                );
                msg.value = "";
                deepseek.checked = false;
            }
        };

        // 点击按钮发送
        sendBtn.addEventListener("click", sendMessage);

        // 按回车发送
        msg.addEventListener("keypress", (e) => {
            if (e.key === "Enter") {
                sendMessage();
            }
        });

        // 聚焦输入框
        msg.focus();
    });
</script>

</body>
</html>